<template>
  <span :style="linkStyle" @click="handleClick">
    {{ word }}
  </span>
</template>

<script>
export default {
  name: 'LinkWord',
  props: {
    word: {
      type: String,
      required: true
    },
    url: {
      type: String,
      default: ''
    },
    route: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 链接样式，默认浅蓝色，无下划线
    linkStyle() {
      return {
        color: '#1E90FF',
        cursor: this.url || this.route ? 'pointer' : 'default',
        textDecoration: 'none'
      }
    }
  },
  methods: {
    handleClick() {
      if (this.route) {
        this.$router.push(this.route) // 跳转路由
      } else if (this.url) {
        window.open(this.url, '_blank') // 打开外部链接
      }
    }
  }
}
</script>

<style scoped>
span:hover {
  color: #1c86ee; /* hover效果 */
}
</style>
